$(function () {
  // 常量 q 是查询的参数对象
  const q = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: ''
  }

  // 获取文章分类
  initCateList()
  // 获取文章列表
  initArtList()

  // 获取文章分类函数
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      if (res.code === 0) {
        let rows = []
        res.data.forEach(item => {
          rows.push(`<option value="${item.id}">${item.cate_name}</option>`)
        })
        $('[name="cate_id"]').append(rows)
        layui.form.render('select')
      }
    })
  }

  // 获取文章列表函数
  function initArtList() {
    axios.get('/my/article/list', {
      params: q
    }).then(({ data: res }) => {
      if (res.code === 0) {
        let rows = []
        res.data.forEach(item => {
          rows.push(`
          <tr>
            <td><a href="javascript:;" style="color: blue" class="show-detail" data-id="${item.id}">${item.title}</a></a></td>
            <td>${item.cate_name}</td>
            <td>${dayjs(item.pub_date).format('YYYY-MM-DD HH:mm:ss')}</td>
            <td>${item.state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn-edit">编辑</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
            </td>
          </tr>
          `)
        })
        $('tbody').html(rows)

        // 展示分页
        renderPage(res.total)
      }
    })
  }

  // 筛选功能
  $('form').on('submit', function (e) {
    e.preventDefault()
    // 根据用户筛选条件重新请求数据
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    q.pagenum = 1
    initArtList()
  })

  // 重置功能
  $('[type="reset"]').on('click', function (e) {
    q.cate_id = ''
    q.state = ''
    q.pagenum = 1
    initArtList()
  })

  // 分页功能
  function renderPage(total) {
    var laypage = layui.laypage
    //执行一个laypage实例
    laypage.render({
      elem: 'page-box',     //注意，这里的 test1 是 ID，不用加 # 号
      count: total,             //数据总数，从服务端得到
      limit: q.pagesize,    // 每页显示的数量
      curr: q.pagenum,    // 指定哪个页码值需要被高亮
      limits: [2, 5, 10, 15, 20],   // 自定义可以选择的条目数
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        q.pagenum = obj.curr    //得到当前页，以便向服务端请求对应页的数据。
        q.pagesize = obj.limit  //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          initArtList()
        }
      }
    })
  }

  // 删除功能
  $('tbody').on('click', '.btn-delete', function () {
    let id = $(this).attr('data-id')
    layer.confirm('确定要删除此文章吗?', { icon: 3, title: '提示' }, function (index) {
      axios.delete('/my/article/info', {
        params: { id }
      }).then(({ data: res }) => {
        if (res.code === 0) {
          layer.msg('删除成功！')
          if (q.pagenum > 1 && $('tbody tr').length === 1) {
            q.pagenum--
          }
          initArtList()
        }
      })
      layer.close(index);
    });
  })

  // 文章预览功能
  $('tbody').on('click', '.show-detail', function () {
    let id = $(this).attr('data-id')
    axios.get('/my/article/info', {
      params: { id }
    }).then(({ data: res }) => {
      console.log(res.data);
      if (res.code === 0) {
        layer.open({
          type: 1,
          title: '预览文章',
          area: ['85%', '85%'],
          content: `
          <div class="artinfo-box">
            <h1 class="artinfo-title">${res.data.title}</h1>
            <div class="artinfo-bar">
              <span>作者：${res.data.nickname || res.data.username}</span>
              <span>发布时间：${dayjs(res.data.pub_date).format('YYYY-MM-DD HH:mm:ss')}</span>
              <span>所属分类：${res.data.cate_name}</span>
              <span>状态：${res.data.state}</span>
            </div>
            <hr>
            <img src="http://www.liulongbin.top:3008${res.data.cover_img}" alt="" class="artinfo-cover">
            <div>文章的内容</div>
          </div>
          `
        });
      }
    })
  })
})